import { Flex,Carousel } from '@ant-design/react-native'
import React,{ Component } from 'react'
import Entypo from 'react-native-vector-icons/Entypo'
import { Text,View,StyleSheet,Image,FlatList,TouchableOpacity } from 'react-native'
import AntDesign from 'react-native-vector-icons/AntDesign'
let dataUrl = "http://www.khino.cn:8080/comment/api/song/getAll"
let mp3Url = "http://www.sanren.vip:5000/Music/"

class ImgItem extends Component {
    render() {
        return (
            <View style={styles.iconBox}>
                <View style={styles.iconitem}>
                    <Image style={styles.icon} source={require('./picture/icons/singer.png')} />
                    <Text>歌手</Text>
                </View>
                <View style={styles.iconitem}>
                    <Image style={styles.icon} source={require('./picture/icons/range.png')} />
                    <Text>排行</Text>
                </View>
                <View style={styles.iconitem}>
                    <Image style={styles.icon} source={require('./picture/icons/radio.png')} />
                    <Text>电台</Text>
                </View>
                <View style={styles.iconitem}>
                    <Image style={styles.icon} source={require('./picture/icons/together.png')} />
                    <Text>一起</Text>
                </View>
            </View>
        )
    }
}
export default class Hall extends Component {
    state={Musics:[]}
    componentDidMount() {
            fetch(dataUrl).then(resp => resp.json())
                .then(musics => {
                    this.setState({ Musics: musics })
            })
            // var musics = this.state.Musics
            // for(var i in musics){
            //     musics[i].songImg = uri(musics[i].songImg)
            // }
            // this.setState({Musics: musics})
    }
    // 轮播图模块 musicItem模块 推荐列表模块
    // 获取所有歌曲 做成列表 然后添加点击事件 
    onHorizontalSelectedIndexChange(index) {
        /* tslint:disable: no-console */
        console.log('horizontal change to',index);
    }
    onVerticalSelectedIndexChange(index) {
        /* tslint:disable: no-console */
        console.log('vertical change to',index);
    }
    imgs = [
        {
            id: 1,
            url: require('./picture/lun1.png')
        },
        {
            id: 2,
            url: require('./picture/lun2.png')
        },{
            id: 3,
            url: require('./picture/lun3.png')
        },{
            id: 4,
            url: require('./picture/lun4.png')
        },{
            id: 5,
            url: require('./picture/lun5.png')
        }
    ]
    
    _renderMusic = ({ item }) =>
        <TouchableOpacity onPress={() => {this.props.navigation.navigate("正在播放", { music: item })}}>
            <View style={{ flexDirection: 'row', height: 60, justifyContent: 'space-between', alignItems: 'center', paddingTop: 5,marginTop:5 }}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 23, width: 60, textAlign: 'center', marginRight: 10 }}>{item.songId}</Text>
                    <Image style={{width:60,height:60}} source={{uri:item.songImg}} />
                    <View >
                        <Text style={{ fontSize: 20 }}>{item.songName}</Text>
                        <Text style={{ fontSize: 12 }}>{item.songSinger}</Text>
                    </View>
                </View>
                <TouchableOpacity>
                    <AntDesign name={"stepforward"} size={30} color={"#FF0033"} />
                </TouchableOpacity>

            </View>
        </TouchableOpacity>

    render() {
        return (
            <View style={styles.squerBox}>
                <View style={styles.lunbo}>
                    <Carousel
                        style={styles.wrapper}
                        selectedIndex={2}
                        autoplay
                        infinite
                        Horizontal
                    >
                        {this.imgs.map((item,index) =>
                            <Image style={{ height: 200,width: '100%' }} source={item.url} />
                        )}
                    </Carousel>
                    <ImgItem  />
                <FlatList ItemSeparatorComponent={this._sep}
                 data={this.state.Musics} 
                 keyExtractor={item => item.songId} 
                 renderItem={this._renderMusic} />
                </View>

            </View>
        )
    }
}
const styles = StyleSheet.create({
    squerBox: {
        flex: 1,
        flexDirection: 'column',
        // justifyContent: 'center'
        alignItems: 'center'
    },
    lunbo: {
        width: '100%',
        height: 200,
        flex: 1,
    },
    wrapper: {
        width: '95%',
        height: 200,
        backgroundColor: 'pink',
        marginLeft: 10
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
    icon: {
        width: 60,
        height: 60,
        borderRadius: 30
    },
    iconitem: {
        flexDirection: 'column',
        alignItems: 'center'
    },
    iconBox: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    songList:{
        top:300,
        width:'95%',
        backgroundColor:'#32d3ff'
    }
})